Skip to content

fix(TMCU-801): replace GlobalAlert with MMDS toast#32914

Draft
georgewrmarshall wants to merge 5 commits into
mainfrom
cursor/fix-globalalert-simplenotification-pure-black-1ac7
Draft

fix(TMCU-801): replace GlobalAlert with MMDS toast#32914
georgewrmarshall wants to merge 5 commits into
mainfrom
cursor/fix-globalalert-simplenotification-pure-black-1ac7

Conversation

@georgewrmarshall

@georgewrmarshall georgewrmarshall commented Jul 7, 2026

Copy link
Copy Markdown
Contributor

Description

This PR fixes pure-black dark mode feedback for clipboard and network-change alerts (TMCU-801) by removing the legacy GlobalAlert stack and migrating call sites to the design-system toast() API.

Why: GlobalAlert relied on scrim/overlay tokens that collapse visually in pure-black dark mode, making success and warning banners hard to read.

What changed:

  • Remove GlobalAlert, the alert Redux action/reducer, and related persist/test wiring
  • Add a single root <Toaster /> in Root inside a full-screen overlay so toasts render above navigation
  • Migrate former GlobalAlert call sites to toast():
    • Network switch warning (switchNetwork.ts)
    • NFT address copied success (NftDetails.tsx)
    • Legacy clipboard path in AccountOverview (dead code, updated for consistency)
  • Remove redundant per-screen <Toaster /> instances from Multichain Accounts screens
  • Revert unrelated SimpleNotification story/test changes; storybook.requires.js matches main

Changelog

CHANGELOG entry: null

Related issues

Fixes: TMCU-801

Manual testing steps

Feature: MMDS toast replaces GlobalAlert in pure-black dark mode

  Scenario: Success toast after copying an NFT address
    Given MM_PURE_BLACK_PREVIEW="true" in .js.env
    And the app is rebuilt with yarn watch:clean
    And the app theme is set to Dark
    When the user copies an NFT contract address from NFT Details
    Then a success toast appears above the bottom navigation
    And the message reads "Token address copied to clipboard"

  Scenario: Warning toast after switching networks
    Given MM_PURE_BLACK_PREVIEW="true" in .js.env
    And the app theme is set to Dark
    When the active network changes (e.g. via deeplink or network switch)
    Then a warning toast appears above the bottom navigation
    And the message includes "Network changed to"

  Scenario: Light mode appearance is unchanged
    Given MM_PURE_BLACK_PREVIEW is off or the app is in light mode
    When success or warning toasts are triggered
    Then the toast is legible and dismissible

Screenshots/Recordings

After screenshots (pure black dark mode, 350px width) are on the Files changed tab as inline file comments:

  • Success toast — app/components/Views/NftDetails/NftDetails.tsx
  • Warning toast — app/util/networks/switchNetwork.ts

Images: https://github.com/MetaMask/metamask-mobile/tree/screenshots/visual-regression/pr-32914/after

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
Open in Web Open in Cursor 

…okens

Replace overlay.* scrim tokens in GlobalAlert with elevated surface and
semantic text/icon colors for pure-black dark mode compatibility. Remove
legacy importedColors usage from SimpleNotification. Add Storybook stories
and unit tests for both components.

Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
@mm-token-exchange-service mm-token-exchange-service Bot added the team-design-system All issues relating to design system in Mobile label Jul 7, 2026
@mm-token-exchange-service

Copy link
Copy Markdown
Contributor

PR template — items to address before "Ready for review"

Warnings — informational, address before merging:

  • Pre-merge author checklist has unchecked items (e.g. "I've documented my code using JSDoc format if applicable"). Every box must be consciously checked — see docs/readme/ready-for-review.md.

See docs/readme/ready-for-review.md for the full Definition of Ready for Review.

@github-actions github-actions Bot added the size-M label Jul 7, 2026
cursoragent and others added 2 commits July 7, 2026 21:34
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
Co-authored-by: George Marshall <georgewrmarshall@users.noreply.github.com>
@codecov-commenter

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 84.46%. Comparing base (c0523e6) to head (0571289).
⚠️ Report is 21 commits behind head on main.

Additional details and impacted files
@@            Coverage Diff             @@
##             main   #32914      +/-   ##
==========================================
+ Coverage   84.41%   84.46%   +0.04%     
==========================================
  Files        5976     5991      +15     
  Lines      156931   157402     +471     
  Branches    38183    38283     +100     
==========================================
+ Hits       132481   132951     +470     
+ Misses      15303    15285      -18     
- Partials     9147     9166      +19     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@sonarqubecloud

sonarqubecloud Bot commented Jul 7, 2026

Copy link
Copy Markdown

Remove the Redux-backed GlobalAlert stack and migrate call sites to toast().
Mount a single root Toaster in a full-screen overlay so toasts render above
navigation, and revert unrelated SimpleNotification story changes from scope.

Co-authored-by: Cursor <cursoragent@cursor.com>
@github-actions

github-actions Bot commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

georgewrmarshall added a commit that referenced this pull request Jul 8, 2026
Co-authored-by: Cursor <cursoragent@cursor.com>

@georgewrmarshall georgewrmarshall Jul 8, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After (pure black dark mode)

Success toast

@georgewrmarshall georgewrmarshall Jul 8, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After (pure black dark mode)

Warning toast

Remove GlobalAlert and SimpleNotification story entries that no longer
have corresponding story files after the toast migration.

Co-authored-by: Cursor <cursoragent@cursor.com>
@georgewrmarshall georgewrmarshall changed the title fix(TMCU-801): migrate GlobalAlert and SimpleNotification off scrim tokens fix(TMCU-801): replace GlobalAlert with MMDS toast Jul 8, 2026
@github-actions

github-actions Bot commented Jul 8, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeSwap, SmokeStake, SmokeWalletPlatform, SmokeMoney, SmokePerps, SmokeMultiChainAPI, SmokePredictions, SmokeSeedlessOnboarding, SmokeBrowser, SmokeSnaps
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: high
  • AI Confidence: 100%
click to see 🤖 AI reasoning details

E2E Test Selection:
Hard rule (global-infrastructure-change): Global infrastructure changed: app/store/persistConfig/index.ts, app/store/persistConfig/persistConfig.test.ts. Running all tests.

Performance Test Selection:
This PR is a UI refactoring that replaces a Redux-based alert system with a design system toast component. The changes are architectural (removing Redux overhead for alerts) but do not affect performance-sensitive flows like app launch, login, onboarding, asset loading, swaps, or account list rendering. The Root component restructuring adds a lightweight View wrapper and Toaster overlay, which has negligible performance impact. No performance test tags are warranted.

View GitHub Actions results

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size-M team-design-system All issues relating to design system in Mobile

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants